<template>
  <div>
    <!-- 待办事务 -->
    <div v-show="showList">
      <el-form size="small" :inline="true">
        <!-- <el-form-item label="流程分类">
          <el-select v-model="queryParams.type" placeholder="请选择 流程分类" style="width:200px;" clearable>
            <el-option label="" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流程名称">
          <el-input v-model="queryParams.name" placeholder="请输入 流程名称" style="width:200px;"></el-input>
        </el-form-item> -->
        <el-form-item label="开始时间" style="font-weight:bold;">
          <el-date-picker v-model="queryParams.beginDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:180px;" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" style="font-weight:bold;">
          <el-date-picker v-model="queryParams.endDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:180px;" clearable>
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="申请人">
          <el-input v-model="queryParams.assigneeName" placeholder="请输入" style="width:200px;"></el-input>
        </el-form-item> -->
        <el-button size="small" class="search_button" type="primary" icon="el-icon-search"
          @click="todoList">查询</el-button>
        <el-button size="small" plain class="reset_button" type="info" icon="el-icon-refresh"
          @click="reset">重置</el-button>
      </el-form>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%;margin-top:10px" border size="medium">
        <el-table-column type="index" width="50">
        </el-table-column>
        <!-- <el-table-column type="selection" align="center" width="55"></el-table-column> -->
        <!-- <el-table-column prop="" label="#" align="center" width="55"></el-table-column> -->
        <el-table-column prop="processDefinitionName" label="流程名称" align="center"></el-table-column>
        <!-- <el-table-column prop="" label="当前步骤" align="center"></el-table-column> -->
        <!-- <el-table-column prop="processDefinitionVersion" label="流程版本" align="center"></el-table-column> -->
        <el-table-column prop="applyUserName" label="申请人" align="center"></el-table-column>
        <el-table-column prop="createTime" label="申请时间" align="center"></el-table-column>
        <el-table-column prop="handle" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="handleTask(scope.row)">处理</el-button>
            <!-- <el-button size="mini" type="primary" plain>流程图</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
        :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
        @size-change="handleSizeChange"></el-pagination>
    </div>



    <div v-show="showList == false">
      <el-form label-width="100px">
        <el-row type="flex" class="row-bg" justify="end">
          <el-form-item>
            <el-button type="primary" @click="agreeTask">同意</el-button>
            <el-button type="danger" @click="refuseTask">驳回</el-button>
            <el-button @click="showList = true">关闭</el-button>
          </el-form-item>
        </el-row>

        <el-card shadow="hover" style="margin-bottom: 20px;">
          <div slot="header" v-show="businessType == 1">
            <span style="font-weight: bold;font-size:18px;">入住流程步骤</span>
          </div>
          <div slot="header" v-show="businessType == 2">
            <span style="font-weight: bold;font-size:18px;">退宿流程步骤</span>
          </div>
          <div slot="header" v-show="businessType == 3">
            <span style="font-weight: bold;font-size:18px;">调寝流程步骤</span>
          </div>
          <el-steps :active="flowList.length - 1" v-show="businessType == 1">
            <el-step title="学生申请" icon="el-icon-video-play"></el-step>
            <el-step title="辅导员审批" icon="el-icon-video-play"></el-step>
            <el-step title="学院书记审批" icon="el-icon-video-play"></el-step>
            <el-step title="后勤办公室审批" icon="el-icon-video-play"></el-step>
            <el-step title="财务处审批" icon="el-icon-video-play"></el-step>
          </el-steps>
          <el-steps :active="flowList.length - 1" v-show="businessType == 2">
            <el-step title="学生申请" icon="el-icon-video-play"></el-step>
            <el-step title="辅导员审批" icon="el-icon-video-play"></el-step>
            <el-step title="学院书记审批" icon="el-icon-video-play"></el-step>
            <el-step title="原楼长审批" icon="el-icon-video-play"></el-step>
            <el-step title="后勤办公室审批" icon="el-icon-video-play"></el-step>
            <el-step title="财务处审批" icon="el-icon-video-play"></el-step>
          </el-steps>
          <el-steps :active="flowList.length - 1" v-show="businessType == 3">
            <el-step title="学生申请" icon="el-icon-video-play"></el-step>
            <el-step title="辅导员审批" icon="el-icon-video-play"></el-step>
            <el-step title="学院书记审批" icon="el-icon-video-play"></el-step>
            <el-step title="原楼长审批" icon="el-icon-video-play"></el-step>
            <el-step title="现楼长审批" icon="el-icon-video-play"></el-step>
            <el-step title="后勤办公室审批" icon="el-icon-video-play"></el-step>
            <el-step title="财务处审批" icon="el-icon-video-play"></el-step>
          </el-steps>
        </el-card>

        <el-card shadow="hover" style="margin-bottom: 20px;">
          <div slot="header">
            <span style="font-weight: bold;font-size:18px;">学生申请信息</span>
          </div>
          <div class="infoItem"><span id="colorTitle">姓名</span> {{ stu.name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
              id="colorTitle">手机号</span> {{ stu.phone }}</div>
          <div class="infoItem"><span id="colorTitle">学号</span> {{ stu.num }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
              id="colorTitle">学院</span> {{ stu.collegeName }}</div>
          <div class="infoItem"><span id="colorTitle">申请理由</span> {{ stu.reason }}</div>
          <div class="infoItem" v-if="oldInfo"><span id="colorTitle">原床位信息</span> {{ oldInfo.oldCampus }} {{
            oldInfo.oldBuild }} {{
    oldInfo.oldDorm
  }} {{ oldInfo.oldBed }} &nbsp;&nbsp;({{ oldInfo.num }})</div>
          <div class="infoItem" v-if="newInfo"><span id="colorTitle">新床位信息</span> {{ newInfo.newCampus }} {{
            newInfo.newBuild }} {{
    newInfo.newDorm
  }} {{ newInfo.newBed }} &nbsp;&nbsp;({{ newInfo.num }})</div>
        </el-card>

        <el-card shadow="hover" style="margin-bottom: 20px;">
          <div slot="header">
            <span style="font-weight: bold;font-size:18px;">审批信息</span>
          </div>

          <el-form-item label="批复意见">
            <el-input type="textarea" v-model="formFinish.comment" />
          </el-form-item>
          <!-- <el-form-item label="审批人">
            <el-select v-model="assignee" filterable placeholder="请搜索姓名或工号" clearable remote
              :remote-method="getSchoolWorker" style="width: 400px;">
              <el-option v-for="item in schoolWorkers" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="后续审批人">
            <el-button type="primary" @click="getSchoolWorker">查询</el-button>
          </el-form-item>
          <el-form-item label="选择审批人" v-show="doneSearch == true">
            <el-select v-model="assignee" placeholder="请选择" clearable style="width: 400px;">
              <el-option v-for="item in schoolWorkers" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-card>

        <el-card shadow="hover" style="margin-bottom: 20px;" v-show="isSelectBed">
          <div slot="header">
            <span style="font-weight: bold;font-size:18px;">床位选择</span>
          </div>
          <!-- <el-form-item label="校区:">
            <el-cascader placeholder="请选择校区" :props="defaultProps" v-model="campus" :options="CampusName"
              @change="chooseCampus" clearable></el-cascader>
          </el-form-item> -->
          <el-form-item label="楼宇:">
            <el-cascader placeholder="请选择楼宇" :props="defaultProps" v-model="building" :options="BuildingName"
              @change="chooseBuilding" clearable></el-cascader>
            <!-- <el-input v-show="building" v-model="floor" placeholder="请输入 楼层" style="width:150px" clearable></el-input>
            <el-input v-show="building" v-model="dormNum" placeholder="请输入 房间号" style="width:150px" clearable></el-input> -->
          </el-form-item>
          <el-form-item label="楼层:" v-show="building">
            <el-input v-show="building" v-model="floor" placeholder="请输入 楼层" style="width:150px" clearable></el-input>
          </el-form-item>
          <el-form-item label="房间号:" v-show="building">
            <el-input v-show="building" v-model="dormNum" placeholder="请输入 房间号" style="width:150px" clearable></el-input>
          </el-form-item>
          <el-form-item v-show="RoomName.length > 0" :label="RoomName == '' ? '' : '提醒'">

            <i class="el-icon-s-custom" style="margin-left: 20px;">-男生宿舍</i>
            <i class="el-icon-star-on" style="margin-left: 20px;">-女生宿舍</i>
            <i class="el-icon-suitcase" style="margin-left: 20px;">-非宿舍</i>

          </el-form-item>
          <el-form-item v-show="RoomName" :label="RoomName == '' ? '' : '房间'">
            <el-button @click="chooseRoom(room)" plain class="tag" v-for="room in  RoomName " :key="room.id" :type="room.liveNum == room.peopleNum ? 'info' : 'primary'
              "
              :icon="room.dormType <= 1 ? room.type == 1 ? 'el-icon-s-custom' : 'el-icon-star-on' : 'el-icon-suitcase'">{{
                room.roomNumber }}</el-button>
          </el-form-item>
          <el-form-item v-show="BedName" :label="BedName == '' ? '' : '床位'">
            <el-button @click="chooseBed(bed)" plain class="tag" v-for="bed in  BedName " :key="bed.id" :type="bed.state == 1 ? 'info' : 'primary'
              ">{{ bed.bedCode }}</el-button>
          </el-form-item>
        </el-card>

        <el-card shadow="hover">
          <div slot="header">
            <span style="font-weight: bold;font-size:18px;">流程信息</span>
          </div>
          <el-row type="flex" class="row-bg">
            <el-timeline>
              <el-timeline-item v-for="flow in flowList" :key="flow.id" :color="flow.endTime ? '#1890FF' : ''"
                :timestamp="flow.endTime" placement="top">
                <el-card shadow=" hover">
                  <p v-if="flow.historyActivityName == '开始'">流程开始</p>
                  <p v-if="flow.historyActivityName == '结束'">流程结束</p>
                  <p v-if="flow.historyActivityName != '开始' && flow.historyActivityName != '结束'"><span id="colorTitle">{{
                    flow.historyActivityName }}</span> {{ flow.assigneeName }}</p>
                  <p v-if="flow.historyActivityName != '开始' && flow.historyActivityName != '结束'">任务历时: {{
                    flow.historyActivityDurationTime }}</p>
                  <p v-if="flow.historyActivityName != '开始' && flow.historyActivityName != '结束'">批复意见: {{ flow.comment }}
                  </p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-row>
        </el-card>
      </el-form>
    </div>



  </div>
</template>

<script>
import { getCollegeName } from '_api/DormManage/College/index.js'

import {
  modelView,
  getStuInfo
  // 查看流程图
} from '_api/FlowManage/flowManage/index.js'
import {
  todoList, //获取列表
} from '_api/MyBusiness/index.js'
import {
  completeTask,  //完成事务
} from '_api/process/index.js'
import { getSchoolWorker } from '_api/UserManage/SchoolWorker/index.js'
import { mapGetters } from "vuex";
import BpmnDesigner from "../../../packages/components/Designer";
import BpmnSettings from "../../../packages/components/Settings";
import BpmnToolbar from "../../../packages/components/Toolbar";
import BpmnContextMenu from "../../../packages/components/ContextMenu/ContextMenu";
import BpmnPanel from "../../../packages/components/Panel";
import { defaultSettings } from "../../../packages/preset-configuration/editor.config";
import { getCampusName } from '_api/DormManage/Building/index.js'
import {
  getBuildingNameByCollege,
} from '_api/DormManage/Building/index.js'
import {
  getDormByBuildId
} from '_api/DormManage/Room/index.js'
import {
  getBedListByDorm
} from "_api/DormManage/Bed/index.js"

export default {
  components: { BpmnPanel, BpmnContextMenu, BpmnToolbar, BpmnSettings, BpmnDesigner },
  props: {
    settings: {
      type: Object,
      default: () => defaultSettings
    }
  },
  data() {
    return {
      doneSearch: false,
      isSelectBed: "",
      campus: "",
      building: "",
      defaultProps: {
        label: "buildName",
        value: "buildId",
        children: "children",
        // checkStrictly: true
      },
      buildId: "",
      floor: "",
      dormNum: "",
      CampusName: [],
      BuildingName: [],
      RoomName: [],
      BedName: [],
      assignee: "",
      searchSchoolWorker: {
        campusId: "",
        collegeId: "",
        current: 0,
        deptId: "",
        field: "",
        name: "",
        order: "",
        pageSize: 400,
        sex: "",
        state: "",
        userName: "",
        tel: "",
        clientRole: ""
      },
      showList: true,
      // 查询参数
      queryParams: {
        current: 1,
        pageSize: 10,
        beginDate: "",
        endDate: ""
      },
      tableData: [],
      total: 0,
      formFinish: {

      },
      // xml
      xmlString: undefined,
      editorSettings: this.settings,
      flowList: "",
      schoolWorkers: [],
      businessType: "",
      stu: {},
      oldInfo: {},
      newInfo: {}
    }
  },
  watch: {
    floor: {
      // 执行方法
      handler(oldValue, newValue) {
        if (oldValue != "") {
          getDormByBuildId({ buildId: this.buildId, floor: this.floor }).then(res => {
            this.RoomName = res.data.data
          })
        }
      },
      deep: true, // 深度监听
    },
    dormNum: {
      // 执行方法
      handler(oldValue, newValue) {
        if (oldValue != "") {
          getDormByBuildId({ buildId: this.buildId, floor: this.floor, dormNum: this.dormNum }).then(res => {
            this.RoomName = res.data.data
          })
        }
      },
      deep: true, // 深度监听
    }
  },
  computed: {
    ...mapGetters(["getEditorConfig"]),
    ...mapGetters(["getModeler"]),
  },
  methods: {
    handleCurrentChange(e) {
      //当前页
      this.queryParams.current = (e - 1) * 10
      this.todoList()
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e
      this.todoList()

    },
    // 选择校区
    chooseCampus(value) {
      const campusId = value[0]
      // console.log(campusId);
      getBuildingNameByCollege({ collegeId: 1 }).then(res => {
        this.BuildingName = res.data.data
      })
    },
    // 选择楼宇
    chooseBuilding(value) {
      this.buildId = value[0]
      // getDormByBuildId({buildId:BuildingId}).then(res => {
      // })
    },
    // 选择房间
    chooseRoom(e) {
      if (e.dormType != 0) {
        this.$message('该房间不是学生宿舍,请重新选择!')
        return false
      }
      if (e.liveNum == e.peopleNum) {
        this.$message('该房间已满员,请重新选择!')
        return false
      }
      getBedListByDorm({ dormId: e.id }).then(res => {
        this.BedName = res.data.data
      })
    },
    // 选择床位
    chooseBed(e) {
      // console.log(e);
      if (e.state == 1) {
        this.$message('该床位已被使用,请重新选择!')
        return false
      }
      this.formFinish.variables = {}
      this.formFinish.variables.newBed = e.id
      console.log(this.formFinish);

      this.$message.success('床位选择成功!')
    },
    getSchoolWorker() {
      // if (window.localStorage.getItem('clientRole') == 2 && this.flowList.length == 3 ) {
      //   this.searchSchoolWorker.collegeId = ""
      // }
      var clientRole = ""
      var collegeId = ""
      if (this.businessType == 1) {
        if (this.flowList.length == 2) {
          clientRole = 2
        }
        if (this.flowList.length == 3) {
          clientRole = 4
          this.searchSchoolWorker.collegeId = ""
        }
        if (this.flowList.length == 4) {
          clientRole = 5
          this.searchSchoolWorker.collegeId = ""
        }
      }
      if (this.businessType == 2) {
        if (this.flowList.length == 2) {
          clientRole = 2
        }
        if (this.flowList.length == 4) {
          clientRole = 4
          this.searchSchoolWorker.collegeId = ""
        }
        if (this.flowList.length == 5) {
          clientRole = 5
          this.searchSchoolWorker.collegeId = ""
        }
      }
      if (this.businessType == 3) {
        if (this.flowList.length == 2) {
          clientRole = 2
        }
        if (this.flowList.length == 5) {
          clientRole = 4
          this.searchSchoolWorker.collegeId = ""
        }
        if (this.flowList.length == 6) {
          clientRole = 5
          this.searchSchoolWorker.collegeId = ""
        }
      }
      this.searchSchoolWorker.clientRole = clientRole
      this.searchSchoolWorker.collegeId = collegeId
      getSchoolWorker(this.searchSchoolWorker).then(res => {
        this.schoolWorkers = res.data.data.list
        this.doneSearch = true
      })
    },
    // getSchoolWorker(e) {
    //   if (isNaN(Number(e))) {
    //     this.searchSchoolWorker.name = e
    //   } else {
    //     this.searchSchoolWorker.userName = e
    //   }
    //   getSchoolWorker(this.searchSchoolWorker).then(res => {
    //     res.data.data.list.forEach(item => {
    //       if (item.collegeName) {
    //         item.name = item.name + '(' + item.collegeName + ')'
    //       }
    //     })
    //     this.schoolWorkers = res.data.data.list
    //     this.searchSchoolWorker = {
    //       campusId: "",
    //       collegeId: "",
    //       current: 0,
    //       deptId: "",
    //       field: "",
    //       name: "",
    //       order: "",
    //       pageSize: 400,
    //       sex: "",
    //       state: "",
    //       userName: "",
    //       tel: "",
    //       clientRole: ""
    //     }
    //   })
    // },

    reset() {
      this.queryParams = {
        current: 1,
        pageSize: 10,
      }
      this.todoList()
    },
    // 查看流程图
    // modelView(e) {
    //   var query = { processDefinitionId: e.processDefinitionId }
    //   modelView(query).then(res => {
    //     this.xmlString = res.data.data.xml
    //     this.showXml = true
    //   })
    // },
    // 处理事务
    handleTask(e) {
      if (e.processDefinitionName == '住宿申请流程') {
        this.businessType = 1
      }
      if (e.processDefinitionName == '退宿申请流程') {
        this.businessType = 2
      }
      if (e.processDefinitionName == '宿舍调整流程') {
        this.businessType = 3
      }
      this.formFinish = e
      // this.dialogHandle = true
      var query = { processInstanceId: e.processInstanceId }
      modelView(query).then(res => {
        this.xmlString = res.data.data.xml
        var flows = []
        res.data.data.flow.forEach(item => {
          flows.unshift(item)
        })
        flows.forEach(item => {
          if (item.endTime) {
            var date = new Date(item.endTime);
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            item.endTime = Y + M + D + h + m + s;
          }
        })
        this.flowList = flows
        this.isSelectBed = res.data.data.isSelectBed
        this.showList = false
      })

      getStuInfo({
        pid: e.processInstanceId,
        type: this.businessType
      }).then(res => {
        this.stu = res.data.data.stu
        this.oldInfo = res.data.data.oldInfo
        this.newInfo = res.data.data.newInfo
      })

      // var clientRole = ""

      // if (e.processDefinitionName == '住宿申请流程') {
      //   if (this.flowList.length == 2) {
      //     clientRole = 2
      //   }
      //   if (this.flowList.length == 3) {
      //     clientRole = 4
      //   }
      //   if (this.flowList.length == 4) {
      //     clientRole = 5
      //   }
      // }
      // if (e.processDefinitionName == '退宿申请流程') {
      //   if (this.flowList.length == 2) {
      //     clientRole = 2
      //   }
      //   if (this.flowList.length == 4) {
      //     clientRole = 4
      //   }
      //   if (this.flowList.length == 5) {
      //     clientRole = 5
      //   }
      // }
      // if (e.processDefinitionName == '宿舍调整流程') {
      //   if (this.flowList.length == 2) {
      //     clientRole = 2
      //   }
      //   if (this.flowList.length == 5) {
      //     clientRole = 4
      //   }
      //   if (this.flowList.length == 6) {
      //     clientRole = 5
      //   }
      // }
      // this.searchSchoolWorker.clientRole = clientRole
      // console.log(this.searchSchoolWorker);
    },
    // 同意
    agreeTask() {
      this.formFinish.pass = true
      this.formFinish.flag = "ok"
      this.formFinish.assignee = this.assignee
      console.log(this.formFinish);
      if (this.isSelectBed == 1) {
        if (!this.formFinish.variables.newBed) {
          this.$message('请选择床位!')
          return false
        }
      }
      if (!this.formFinish.comment) {
        this.$message('请批复意见!')
        return false
      }
      completeTask(this.formFinish).then(res => {
        this.$message(res.data.msg)
        if (res.data.success == true) {
          this.showList = true
          this.reset()
        } else {
          this.$message(res.data.message)
        }
      })
    },
    // 驳回
    refuseTask() {
      this.formFinish.pass = false
      this.formFinish.flag = "no"
      completeTask(this.formFinish).then(res => {
        this.$message(res.data.msg)
        if (res.data.success == true) {
          this.showList = true
          this.reset()
        }
      })
    },
    // 转换时间
    changeTime(time) {
      var date = new Date(time);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      return (Y + M + D + h + m + s);
    },
    handleCurrentChange(e) {
      //当前页
      this.queryParams.current = e
      this.todoList()
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e
      this.todoList()
    },
    todoList() {
      todoList(this.queryParams).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          // this.tableData.forEach(item => {
          //   item.createTime = this.changeTime(item.createTime)
          // })
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    },
    //获取校区名称
    getCampusName() {
      getCampusName().then(res => {
        // console.log(res)
        if (res.status == 200) {
          this.CampusName = res.data.data
        }
      })
    },
    //获取楼宇
    getBuildingNameByCollege() {
      var that = this
      if (window.localStorage.getItem('clientRole') == 1 || window.localStorage.getItem('clientRole') == 2) {
        getCollegeName().then(res => {
          res.data.data.forEach(item => {
            if (item.name == window.localStorage.getItem('collegeName')) {
              that.searchSchoolWorker.collegeId = item.id
            }
          })
          getBuildingNameByCollege({ collegeId: that.searchSchoolWorker.collegeId }).then(res => {
            that.BuildingName = res.data.data
          })
        })
      }
    }
  },
  created() {
    this.todoList()
    this.editorSettings.paletteMode = "custom"
    this.$store.commit('setConfiguration', this.editorSettings)
    // this.getCampusName()

    this.getBuildingNameByCollege()
  },
  mounted() {
    // document.body.addEventListener("contextmenu", function (ev) {
    //   ev.preventDefault();
    // });
  }
}
</script>

<style lang="scss" scoped>
.tag {
  cursor: pointer;
  margin-left: 2px;
  width: 70px;
}

.pagination {
  float: right;
  margin-top: 10px;
}

#colorTitle {
  color: #ffffff;
  background-color: rgb(233, 182, 44);
  padding: 2px 6px;
  border-radius: 4px;
}

.infoItem {
  margin-top: 10px;
}
</style>
